<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>轮换图</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="slider" id="slider">
    <ul>
      <li><img src="img/01.jpg" /></li>
      <li><img src="img/02.jpg" /></li>
      <li><img src="img/03.jpg" /></li>
    </ul>
  </div>

  <div class="slider" id="slider2" data-config='{
      "numControl" : true,
      "speed" : 2000,
      "numControl":true,
      "arrowControl":true
    }'>
    <ul>
      <li><img src="img/01.jpg" /></li>
      <li><img src="img/02.jpg" /></li>
      <li><img src="img/03.jpg" /></li>
    </ul>
  </div>

  <div class="slider" id="slider3">
    <ul>
      <li><img src="img/01.jpg" /></li>
      <li><img src="img/02.jpg" /></li>
      <li><img src="img/03.jpg" /></li>
    </ul>
  </div>

  <script src="js/jquery-1.12.4.min.js"></script>
  <script src="js/slider.js"></script>
  <script>
     $(function(){
       $("#slider").slider({
           numControl:true,
           fadeIn:true
       });
       
       $("#slider2").slider();

       $("#slider3").slider({
           arrowControl:true,
           onChange:function(index){
             console.log(index)
            //  alert(index)
           }
       });

     });
  </script>
</body>
</html>